
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <title>徐霞客320-CSDN博客</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <link rel="icon" href="https://g.csdnimg.cn/static/logo/favicon32.ico">
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="./01-swiper.css">
    <link rel="stylesheet" href="./03-二级导航.css">
    <link rel="stylesheet" href="./05-轮播图上面.css">
    <link rel="stylesheet" href="./02-五栏布局.css">
    <link rel="stylesheet" href="./02-上下轮播.css">
    <link rel="stylesheet" href="./03-增值服务.css">
    <link rel="stylesheet" href="./04-四栏布局.css">
    <link rel="stylesheet" href="./footer.css">
    <link rel="stylesheet" href="./01-swiper-lunbo.css">
    <!-- Demo styles -->
    <style>
      *{
        margin: 0;
        padding: 0;
      }
     .qq05{
        height: 580px;
     }
    </style>
  </head>

  <body>

    <!-- 轮播图上面 -->
<div class="boxBig">
    <div class="boB01">
        <a href="https://blog.csdn.net/weixin_73629886?spm=1000.2115.3001.5343"><img src="./img/轮播图上面.png" style="width: 1250px;"></a>
    </div>
</div>

    <!-- Swiper -->
    <!-- 左右轮播 -->
   <div class="boxlb">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide qq05"><img src="./img/02.jpg" alt=""></div>
          <div class="swiper-slide qq05"><img src="./img/03.jpg" alt=""></div>
          <div class="swiper-slide qq05"><img src="./img/04.jpg" alt=""></div>
          <div class="swiper-slide qq05"><img src="./img/04.jpg" alt=""></div>
          <div class="swiper-slide qq05"><img src="./img/05.jpg" alt=""></div>
          <div class="swiper-slide qq05"><img src="./img/06.jpg" alt=""></div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
      </div>


      <!-- 二级导航 -->
      <div class="boxq">
        <div class="boxjk">
          <!-- 二级导航左边区域 -->
          <ul>
              <a href="https://blog.csdn.net/weixin_73629886/article/details/138088922?spm=1001.2014.3001.5501">
                  <li>C++入门1——从C语言到C++的过渡</li>
              </a>
              <a href="https://blog.csdn.net/weixin_73629886/article/details/138543624?spm=1001.2014.3001.5502">
                  <li>C++入门2——类与对象1（类的定义和this指针）</li>
              </a>
              <a href="https://blog.csdn.net/weixin_73629886/article/details/139155483?spm=1001.2014.3001.5502">
                  <li>C++入门3——类与对象2（类的6个默认成员函数）</li>
              </a>
              <a href="https://blog.csdn.net/weixin_73629886/article/details/139301495?spm=1001.2014.3001.5502">
                  <li>C++入门4——类与对象3（构造函数的类型转换和友元详解）</li>
              </a>
              <a href="https://blog.csdn.net/weixin_73629886/article/details/139393044?spm=1001.2014.3001.5502">
                  <li>C++入门5——C/C++动态内存管理（new与delete）</li>
              </a>
              <a href="https://blog.csdn.net/weixin_73629886/article/details/139506107?spm=1001.2014.3001.5502">
                  <li>C++入门6——模板（泛型编程、函数模板、类模板）</li>
              </a>
              <a href="https://blog.csdn.net/weixin_73629886/article/details/139248426?spm=1001.2014.3001.5502">
                  <li>C++入门之日期类的实现</li>
              </a>
              <a href="https://blog.csdn.net/weixin_73629886/article/details/139348936?spm=1001.2014.3001.5502">
                  <li>C++入门之 ostream和istream详解</li>
              </a>
              <a href="https://blog.csdn.net/weixin_73629886/article/details/138584139?spm=1001.2014.3001.5502">
                  <li>数据结构1——顺序表（C语言版）</li>
              </a>
              <a href="https://blog.csdn.net/weixin_73629886/article/details/130608987?spm=1001.2014.3001.5502">
                  <li>初识C语言1——C语言入门介绍</li>
              </a>
          </ul>
         
      </div>
       </div>
   </div>


<!-- 笔记本 -->

<div class="boxFa">
  <!-- 笔记本部分 -->
  <div class="bjb">
      <span class="bjb01" style="font-size: 20px;">
          热门文章 
      </span>
      <span style="font-size: 20px;color: gray;">
        popular articles
      </span>
      <span style="float: right;color: red;">
          <a href=""></a>专栏
      </span>
  </div>
  <div class="box">
      <div class="boh bok01" style="margin-right: 10px;">

      </div>
      <div class="boh">
          <img src="./img01/笔记本img/b2.jpg" alt="">
          <p style="text-align: left;">C++入门1——从C语言到C++的过渡</p>
      </div>
      <div class="boh" style="margin: 0 10px;">
          <img src="./img01/笔记本img/b3.png" alt="">
          <p style="text-align: left;">C++入门2——类与对象1（类的定义和this指针）</p>
      </div>
      <div class="boh">
          <img src="./img01/笔记本img/b4.png" alt="">
          <p style="text-align: left;">C++入门3——类与对象2（类的6个默认成员函数）</p>
      </div>
      <div class="boh bog" style="margin-left: 10px;">
          <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide wh01">
                  <img src="./img01/笔记本img/轮滑 (1).png" alt="">
                  <p>C++</p>
                  <p>9篇</p>
                </div>
                <div class="swiper-slide wh01"> <img src="./img01/笔记本img/轮滑 (1).png" alt="">
                    <p>C语言</p> <br>
                    <p>1篇</p>
                </div>
                <div class="swiper-slide wh01"> <img src="./img01/笔记本img/轮滑 (3).png" alt="">
                    <p>数据结构</p> <br>
                    <p>1篇</p>
                </div>
                <div class="swiper-slide wh01"> <img src="./img01/笔记本img//轮滑 (4).png" alt="">
                    <p>Linux</p> <br>
                    <p>0篇</p>
                </div>
                <div class="swiper-slide wh01"> <img src="./img01/笔记本img/轮滑 (5).png" alt="">
                    <p>做题</p> <br>
                    <p>5篇</p>
                </div>
                
            
              </div>
              <div class="swiper-scrollbar"></div>
            </div>
      </div>
  </div>

  <div class="box">
      <div class="boh bok02" style="margin-right: 10px;">
      </div>
      <div class="boh">
          <img src="./img01/笔记本img/b8.png" alt="">
          <p style="text-align: left;">C++入门4——类与对象3（构造函数的类型转换和友元详解）</p>
      </div>
      <div class="boh" style="margin: 0 10px;">
          <img src="./img01/笔记本img/b6.png" alt="">
          <p style="text-align: left;">C++入门5——C/C++动态内存管理（new与delete）</p>
      </div>
      <div class="boh">
          <img src="./img01/笔记本img/b7.png" alt="">
          <p style="text-align: left;">C++入门6——模板（泛型编程、函数模板、类模板）</p>
      </div>
      
  </div>
</div>


<div class="boxFa">
  <!-- 笔记本部分 -->
  </div>
</div>

<!-- 底部 -->
<div class="footer">
  <div class="ftSon">
      <div class="fsOne">
          <img src="./img/底部01.jpg" alt="">
          <p>
            <a href="https://blog.csdn.net/weixin_73629886/article/details/137979020">实验一（定期存款利息估算）</a>
          </p>
      </div>
      <div class="fsOne">
          <img src="./img/底部02.jpg" alt="">
          <p>
            <a href="https://blog.csdn.net/weixin_73629886/article/details/138013954">实验二（银行储蓄系统）</a>
          </p>
      </div>
      <div class="fsOne">
          <img src="./img/底部03.jpg" alt="">
          <p>
            <a href="https://blog.csdn.net/weixin_73629886/article/details/138044863">实验三（房贷利息估算）</a>
          </p>
      </div>
      <div class="fsOne">
          <img src="./img/底部04.jpg" alt="">
          <p>
            <a href="https://blog.csdn.net/weixin_73629886/article/details/138381473">实验四（贷款系统）</a>
          </p>
      </div>
      <div class="fsOne">
          <img src="./img/底部05.jpg" alt="">
          <p>
            <a href="https://blog.csdn.net/weixin_73629886/article/details/139178707">实验五（银行综合信息系统）</a>
          </p>
      </div>
      <div class="fsOne">
          <img src="./img/底部06.jpg" alt="">
          <p>
              <a href="https://blog.csdn.net/weixin_73629886/article/details/133922601?spm=1001.2014.3001.5501">初识C语言之三子棋游戏</a>
          </p>
      </div>
      <div class="fsOne">
          <img src="./img/底部07.jpg" alt="">
          <p>
              <a href="https://blog.csdn.net/weixin_73629886/article/details/130795363?spm=1001.2014.3001.5501">初识C语言之以猜数字游戏为例</a>
          </p>
      </div>

      <div class="fsOne">
          <img src="./img/底部08.jpg" alt="">
          <p>
              <a href="https://blog.csdn.net/weixin_73629886/article/details/135885208?spm=1001.2014.3001.5501">初始C语言5——操作符详解</a>
          </p>
      </div>
  </div>
  <div class="ftTwo">
      
  <div class="ftThr">
    <h3>博主微信</h3>
    <img src="./img/微信.jpg" alt="">
  </div>
  <div class="ftThr">
    <h3>博主QQ</h3>
    <img src="./img/QQ.jpg" alt="">
  </div>
  <div class="ftThr">
    <h3>博主抖音</h3>
    <img src="./img/抖音.jpg" alt="">
  </div>
  <div class="ftThr">
    <h3>博主CSDN</h3>
    <img src="./img/CSDN.jpg" alt="">
  </div>
    
</div>
<div class="footer01">
  <div class="ft01">
      <p style="color: gray;">
          <span>
            <a href="https://www.csdn.net/company/index.html#about">关于我们</a>
          </span>|
          <span>
              <a href="https://www.csdn.net/company/index.html#recruit">招贤纳士</a>
          </span>
          <span>|
              <a href="https://marketing.csdn.net/questions/Q2202181741262323995">商务合作</a>
          </span>
          <span>|
              <a href="https://marketing.csdn.net/questions/Q2202181748074189855">寻求报道</a>
          </span>
          &nbsp;&nbsp;
          <span>
            <img src="./img/phone.png" alt="">400-660-0108
          </span>
          &nbsp;&nbsp;
          <span>
            <img src="./img/email.png" alt="">2640228991@qq.com
        </span>
        &nbsp;&nbsp;
        <span>
            <img src="./img/cs.png" alt="">在线客服
        </span>
        &nbsp;&nbsp;
        <span>
            &nbsp;&nbsp;&nbsp;工作时间 8:30-22:00
        </span>

      </p>
      <p style="font-size: 12px;">
        <img src="./img/badge.png" alt="">
        公安备案号11010502030143&nbsp;&nbsp;&nbsp;京ICP备19004658号&nbsp;&nbsp;京网文〔2020〕1039-165号&nbsp;&nbsp;&nbsp;京网文〔2020〕1039-165号&nbsp;&nbsp;&nbsp;经营性网站备案信息&nbsp;&nbsp;&nbsp;北京互联网违法和不良信息举报中心&nbsp;&nbsp;&nbsp;家长监护&nbsp;&nbsp;&nbsp;网络110报警服务&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国互联网举报中心&nbsp;&nbsp;&nbsp;Chrome商店下载&nbsp;&nbsp;&nbsp;账号管理规范&nbsp;&nbsp;&nbsp;版权与免责声明&nbsp;&nbsp;&nbsp;版权申诉&nbsp;&nbsp;&nbsp;出版物许可证&nbsp;&nbsp;&nbsp;营业执照&nbsp;&nbsp;&nbsp;©1999-2024北京创新乐知网络技术有限公司
      </p>
  </div>
</div>
  </body>
  <!-- Swiper JS -->
  <script src="./01-swiper.js"></script>
  <!-- <script src="./02-五栏布局.js"></script> -->

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 1,
      spaceBetween: 30,
      loop: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  </script>

  <script>
    refreshEnd= false;
	times=0;//加载次数
	oriSpeed=300
    var swiper = new Swiper('.swiper-container',{
		speed: oriSpeed,
		slidesPerView: 'auto',
		freeMode: true,
        direction: 'vertical',
		setWrapperSize: true,
		scrollbar: {
            el: '.swiper-scrollbar',
        },
		on:{
			//下拉释放刷新
			touchEnd: function(){
				swiper=this
				refreshText=swiper.$el.find('.refresh')
                if(this.translate>100){
	                swiper.setTransition(this.params.speed);
                    swiper.setTranslate(100);
		            swiper.touchEventsData.isTouched=false;//跳过touchEnd事件后面的跳转(4.0.5)
		            refreshText.html('刷新中')
					
		            swiper.allowTouchMove=false;
					setTimeout(function(){//模仿AJAX
						swiper.removeAllSlides();
						for(i=0;i<20;i++){
						swiper.appendSlide('<div class="swiper-slide">New Slide'+(i+1)+'</div>');
						refreshText.html('刷新完成');
						refreshEnd=true;
						swiper.allowTouchMove=true;
						}
					},1000)
					
                 }
				 
            },
			touchStart: function(){
				if(refreshEnd==true){
                    this.$el.find('.refresh').html('释放刷新');
					refreshEnd=false;
				}
            },
			
			//加载更多
			momentumBounce: function(){//非正式反弹回调函数，上拉释放加载更多可参考上例
				swiper=this
				if(swiper.translate<-100){
		
					swiper.allowTouchMove=false;//禁止触摸
					swiper.params.virtualTranslate=true;//定住不给回弹
                    setTimeout(function(){//模仿AJAX
					    for(m=0;m<20;m++){
					        swiper.appendSlide('<div class="swiper-slide">moreSlide'+(times*20+m+1)+'</div>');	
						}
						swiper.params.virtualTranslate=false;
						swiper.allowTouchMove= true;
						times++
				    },1000)
					
				}
			},
		}
	});

  </script>

</html>
